
@extends('layouts._main')

@section('title','I礼品卡')

@section('css')
    <link rel="stylesheet" href="{{ asset('/css/card.css') }}">
    <style>

        /*#d79705;渐变色调浅色：#dec07a*/
        body{
            background-color: #ECECEC;
        }
        .body{
            font-size: 14px;
        }
        .weui-navbar {

            position: initial;
        }
        .weui-navbar__item:after {

            border-right: none;

        }
        .weui-navbar:after {

            border-bottom: none;

        }
        .weui-tab__panel{
            display: none;
        }

        .weui-navbar__item.weui-bar__item_on {
            border-bottom:2px solid #D58B00;
            background-color: #fff;
        }
        .weui-navbar {
            box-sizing: border-box;
            background-color: #fff;
            padding: 0 15px;
            border-bottom: 1px solid #ddd;
        }
        .weui-navbar+.weui-tab__panel {
            padding-top: 10px;
            padding-bottom: 0;
        }
        .weui-flex__item{
            box-sizing: border-box;
            float: left;
            width: 50%;
            padding: 5px;
            text-align: center;
        }
        .placeholder{
            box-sizing: border-box;
            width: 98%;
            height: 90px;
            background-color: gold;
            margin: 0 auto;
            border-radius: 10px;
            box-shadow: 0px 2px 2px 1px #d0d0d0;
            position: relative;
        }

        #recharge{
            padding: 10px 0px;
        }

        .input_div>input{
            width: 100%;
            border: none;
            border-bottom: 1px solid #ddd;
        }
        .weui-navbar__item {
            padding: 7px 0;
        }
        .nav_bar{
            background-color: #fff;
            padding: 10px 15px;
            text-align: center;
            border-bottom: 1px solid #D0D0D0;
            position: relative;
        }
        .nav_bar>.nav_back {
            background: url('/images/version1/icon_bar_back.png') no-repeat;
            background-size: 20px 20px;
            position: absolute;
            left: 10px;
            top: 12px;
        }
        .excharge_record{
            color: #d79705;
            font-size: 12px;
            position: absolute;
            right: 10px;
            top: 12px;
        }
        .jinxuan{
            padding-left: 15px;
            color: #aaa;
            font-size: 12px;
        }
        .bind_card{
            box-sizing: border-box;
            width: 80%;
            margin: 0 auto;
            height: 128px;
            border-radius: 15px;
            margin-top: 10px;
            position: relative;
            box-shadow: -1px 3px 5px #d0d0d0;
            /*box-shadow: -1px 3px 5px #6F4f64;*/
        }
        .card_inline{
            position: absolute;
        }
        .bind_card_desc{
            left: 15px;
            bottom: 10px;
        }
        .bind_card_desc p:nth-child(2){
            font-size: 18px;
        }
        .bind_card_tap{
            right: 15px;
            bottom: 10px;
            background: #fff;
            font-size: 10px;
            padding: 0px 7px;
            border-radius: 10px;
        }
        .add_bind_card{
            background-color: #F7F7F7;
        }
        .across{
            width: 80px;
            height: 1px;
            background: #ddd;
            top: 50%;
            left: 37%;
        }
        .vertical{
            height: 50px;
            width: 1px;
            background: #ddd;
            top: 36%;
            left: 50%;
        }
        .mclist {
            margin: 6px 14px 24px 14px;
            padding: 0 5%;
        }
        .mcard .mcard-code .code {
            width: 100px;
            height: 100px;
            background-color: #FFF;
            border: solid 2px #FFF;
            margin-bottom: 5px;
        }
        .mcard {
            padding-bottom: 55%;
        }
        .send_to{
            color: #fff;
            font-size: 15px;
            background-color: rgba(0,0,0,0.3);
            border-radius: 10px;
        }
        .card_no {
            font-size: 14px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.3);
            text-align: center;
        }
        .weui-dialog__ft .dialogs:active{
            color: #dec07a;
        }
        .weui-skin_android .weui-dialog__title {
            font-size: 18px;
            color: #d79705;
        }
        .weui-dialog {
            border-radius: 20px;
        }
    </style>
@endsection

@section('container')
    <div class="body">
        <div class="nav_bar" style="color:#d79705;">
            <div class="nav_back"></div>
            <span>礼品卡</span>
            <a class="excharge_record" href="{{ route('oGiftRecord') }}">绑卡记录</a>
        </div>
        <div class="page navbar js_show">
            <div class="page__bd" style="height: 100%;">
                <div class="weui-tab">
                    <div class="weui-navbar">
                        {{--tap--}}
                        <div class="weui-navbar__item weui-bar__item_on" data-id="exchange">
                            购买礼品卡
                        </div>
                        <div class="weui-navbar__item" data-id="unbind">
                            未绑定礼品卡
                        </div>
                        <div class="weui-navbar__item" data-id="recharge">
                            我的礼品卡
                        </div>
                    </div>

                    {{--购买礼品卡--}}
                    <div class="weui-tab__panel" id="exchange" style="display: block">
                        <p class="jinxuan">精选礼品卡</p>

                        @forelse($gifts as $gift)

                            <div class="weui-flex__item" style="padding-right: 5px">
                                <a href="{{ url('/order/buy/'.$gift->id_gift.'/gift') }}">
                                    <div class="placeholder" style="background-image: url('/images/wxcard_bgshading/{{ empty($gift->card_shading)?'1.png':$gift->card_shading }}'); background-color: {{ $gift->card_bgcolor }};background-size: 100% 100%">
                                        <p class="card_no" style="border-top-left-radius: 10px;border-top-right-radius: 10px">{{ $gift->name }}</p>
                                        <div class="card_inline bind_card_desc">
                                            {{--<p>礼平卡金额（元）</p>--}}
                                            <p style="float: left;">￥{{ round($gift->cash) }}</p>
                                        </div>
                                    </div>
                                </a>
                            </div>

                        @empty
                            <div class="weui-loadmore weui-loadmore_line empty" style="display: none">
                                <span class="weui-loadmore__tips">到底了:(</span>
                            </div>
                        @endforelse


                    </div>

                    {{--未绑定礼品卡--}}
                    <div class="weui-tab__panel " id="unbind">
                        <ul class="mclist">
                            {{--列表--}}
                            @foreach($unbind as $unbind_gift)
                                <li>
                                    {{--正面--}}
                                    <div class="viewport-flip">
                                        <div class="flip inright in">
                                            <div class="mcard " style="background-image: url('/images/wxcard_bgshading/{{ empty($unbind_gift->mgift->card_shading)?'1.png':$unbind_gift->mgift->card_shading }}'); background-color: {{ $unbind_gift->card_bgcolor }};">
                                                <p class="card_no">卡号：{{ $unbind_gift->gift_no }}</p>
                                                <div class="card_inline bind_card_desc">
                                                    <p>礼平卡金额（元）</p>
                                                    <p>{{ round($unbind_gift->pay_amount/100,2) }}</p>
                                                </div>
                                                {{--<div class="card_inline bind_card_tap {{ $unbind_gift->gift_no }}">
                                                    {{ $unbind_gift->use_id_wxuser_merchant?'未绑定':'已绑定' }}
                                                </div>--}}
                                            </div>
                                        </div>
                                        {{--反面--}}
                                        <div class="flip outleft out">
                                            <div class="mcard " style="background-image: url('/images/wxcard_bgshading/{{ empty($unbind_gift->mgift->card_shading)?'1.png':$unbind_gift->mgift->card_shading }}'); background-color: {{ $unbind_gift->card_bgcolor }};">
                                                <div class="mcard-code weui-flex">
                                                    <div class="weui-flex__item">
                                                        <div class="code" data-reg1step="{{ base64_encode(strrev($unbind_gift->card_password)) }}"></div>
                                                    </div>

                                                    <div class="weui-flex__item">
                                                        <p class="send_to">转赠给朋友</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>

                    </div>

                    {{--我的礼品卡--}}
                    <div class="weui-tab__panel " id="recharge">
                        <ul class="mclist">
                            {{--列表--}}
                            @foreach($bind as $buy_gift)
                                <li>
                                    {{--正面--}}
                                    <div class="viewport-flip">
                                        <div class="flip inright in">
                                            <div class="mcard " style="background-image: url('/images/wxcard_bgshading/{{ empty($buy_gift->mgift->card_shading)?'1.png':$buy_gift->mgift->card_shading }}'); background-color: {{ $buy_gift->card_bgcolor }};">
                                                <p class="card_no">卡号：{{ $buy_gift->gift_no }}</p>
                                                <div class="card_inline bind_card_desc">
                                                    <p>礼平卡金额（元）</p>
                                                    <p>{{ round($buy_gift->pay_amount/100,2) }}</p>
                                                </div>
                                                <div class="card_inline bind_card_tap {{ $buy_gift->gift_no }}">
                                                    {{'已绑定' }}
                                                </div>
                                            </div>
                                        </div>
                                        {{--反面--}}
                                        <div class="flip outleft out">
                                            <div class="mcard " style="background-image: url('/images/wxcard_bgshading/{{ empty($buy_gift->mgift->card_shading)?'1.png':$buy_gift->mgift->card_shading }}'); background-color: {{ $buy_gift->card_bgcolor }};">
                                                <div class="mcard-code weui-flex">
                                                    <div class="weui-flex__item">
                                                        {{--<div class="code" data-reg1step="{{ base64_encode(strrev($buy_gift->card_password)) }}"></div>--}}
                                                    </div>

                                                    <div class="weui-flex__item">
                                                        {{--<p class="send_to">转赠给朋友</p>--}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            @endforeach

                        </ul>

                        {{--添加绑卡--}}
                        <div class="bind_card add_bind_card">
                            <div class="across card_inline"></div>
                            <div class="vertical card_inline"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    {{--弹窗--}}
    <div class="js_dialog" id="androidDialog1" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog weui-skin_android">
            <div class="weui-dialog__hd"><strong class="weui-dialog__title">绑定礼品卡</strong></div>
            <div class="do_bind_card">
                {{--<p style="padding-left: 10%;font-size: 16px;color: #333;">绑定礼品卡</p>--}}

                <div class="bind_card" style="background-color: #fff">
                    <div class="weui-cell" style="height: 10px">
                        <div id="show_msg" style="text-align: center;color: red;margin: 0 auto;font-size: 12px"></div>
                    </div>
                    {{--<p style="padding-left: 15px">卡号</p>--}}
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" name="gift_no" value="" maxlength="80" placeholder="请填写卡号">
                        </div>
                    </div>
                    {{--<p style="padding-left: 15px">密码</p>--}}
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" name="card_password" value="" maxlength="80" placeholder="请填写密码">
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="dialogs weui-dialog__btn weui-dialog__btn_default">取消</a>
                <a href="javascript:;" style="color:#d79705;" class="bind_card_button weui-dialog__btn weui-dialog__btn_primary">立即绑定</a>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script type="text/javascript" src="{{ asset('js/jquery.qrcode.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('/js/jquery.mobile.custom.js') }}"></script>
    <script type="text/javascript" class="navbar js_show">
        $(function(){

            //卡高度计算
            $('.placeholder').css('height',$('.placeholder').width()*1*0.6+'px');

            //tap切换
            $('.weui-navbar__item').on('click', function () {
                $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
                var id = $(this).data('id');
                $('.weui-tab__panel').hide();
                $('#'+id).show();
                $('.bind_card').css('height',$('.bind_card').width()*1*0.5+12+'px');
            });

            //绑定礼平卡
            $('.add_bind_card').click(function () {

                $('#androidDialog1').fadeIn('200');
            });
            //取消
            $(document).on('click', '.dialogs', function(){
                $('.bind_card_button').removeClass('loadding');
                $('#androidDialog1').fadeOut(200);
            });
            //执行绑定
            $('.bind_card_button').click(function () {
                if($(this).hasClass('loadding')) return false;

                var gift_no = $('input[name=gift_no]').val();
                var card_password = $('input[name=card_password]').val();

                if(!gift_no){
                    $('#show_msg').text('卡号不能为空').fadeIn(500);
                    setTimeout(function () {
                        $('#show_msg').text('卡号不能为空').fadeOut(500);
                    },1000);
                    return false;
                }

                if(!card_password){
                    $('#show_msg').text('密码不能为空').fadeIn(500);
                    setTimeout(function () {
                        $('#show_msg').text('密码不能为空').fadeOut(500);
                    },1000);
                    return false;
                }

                $(this).addClass('loadding');
                var _this = $(this);
                $.ajax({
                    url:'/ajax/bind/gift-card',
                    type:'post',
                    dataType:'json',
                    data:{'_token':window.laravel_csrf_token,'gift_no':gift_no,'card_password':card_password},
                    success:function(res){
                        if(res.code==4003){
                            $('#androidDialog1').fadeOut(200);
                            showMsg(res.msg);
                        }
                        if(res.code==200){
                            $('#androidDialog1').fadeOut(200);

                            $('.'+res.gift_no).text('已绑定');

                            showMsg(res.msg);
                        }

                        $('#show_msg').text(res.msg).fadeIn(200);
                        setTimeout(function () {
                            $('#show_msg').text(res.msg).fadeOut(500);
                        },1000);
                        _this.removeClass('loadding');
                    }
                });
            });

            //二维码
            $('.mcard-code .code').each(function(k, code){
                $(code).qrcode({
                    width: 100,
                    height: 100,
                    render: 'canvas',
                    text: $(code).attr('data-reg1step')
                });
            });
            // 左滑
            var mcardSwipeLeft = function(mcard){
                if(!$(mcard).hasClass('fliping')){
                    $(mcard).addClass('fliping');
                    var inEle = $(mcard).find('.in');
                    var outEle = $(mcard).find('.out');
                    inEle.addClass("outleft").addClass("out").removeClass("inright").removeClass("inleft").removeClass("in");
                    setTimeout(function() {
                        outEle.addClass("inright").addClass("in").removeClass("outleft").removeClass("outright").removeClass("out");

                        $(mcard).removeClass('fliping');
                    }, 225);
                }
            };
            // 右滑
            var mcardSwipeRight = function(mcard){

                if(!$(mcard).hasClass('fliping')){
                    $(mcard).addClass('fliping');
                    var inEle = $(mcard).find('.in');
                    var outEle = $(mcard).find('.out');
                    inEle.addClass("outright").addClass("out").removeClass("inleft").removeClass("inright").removeClass("in");
                    setTimeout(function() {
                        outEle.addClass("inleft").addClass("in").removeClass("outright").removeClass("outleft").removeClass("out");

                        $(mcard).removeClass('fliping');
                    }, 225);
                }
            }

            //实现翻转
            $('.viewport-flip').on({
                'swipeleft': function(e){
                    mcardSwipeLeft($(this));
                },
                'swiperight': function(e){
                    mcardSwipeRight($(this));
                }
            });


        });
    </script>
@endsection

